<script setup>
	const list =[
		{
			
			id:1,
			title:'寸照',
			photo:'一寸',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:2,
			photo:'二寸',
			sizes:'尺寸35*49mm',
			pixel:'像素413*626px'
		},
		{
			id:3,
			photo:'小二寸',
			sizes:'尺寸22*32mm',
			pixel:'像素260*378px'
		},
		{
			id:4,
			photo:'小二寸',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:5,
			photo:'大二寸',
			sizes:'尺寸33*48mm',
			pixel:'像素390*567px'
		},
		{
			id:6,
			photo:'五寸',
			sizes:'尺寸89*127mm',
			pixel:'像素1051*1500px'
		},
		{
			
			id:7,
			title:'语言考试',
			photo:'英语四六级考试(CET)',
			sizes:'尺寸51*68mm',
			pixel:'像素600*800px'
		},
		{
			
			id:8,
			photo:'英语等级考试（PETS）',
			sizes:'尺寸33*48mm',
			pixel:'像素390*567px'
		},
		{
			id:9,
			photo:'中高级口译',
			sizes:'尺寸35*53mm',
			pixel:'像素413*626px'
		},
		{
			id:10,
			photo:'职称英语考试',
			sizes:'尺寸36*49mm',
			pixel:'像素420*580px'
		},
		{
			id:11,
			photo:'韩语考试',
			sizes:'尺寸30*40mm',
			pixel:'像素354*472px'
		},
		{
			id:12,
			photo:'日语考试',
			sizes:'尺寸30*41mm',
			pixel:'像素360*480px'
		},
		{
			id:13,
			photo:'普通话水平测试',
			sizes:'尺寸33*48mm',
			pixel:'像素390*567px'
		},
		{
			id:14,
			title:'学生',
			photo:'学生证',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:15,
			photo:'团员证',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:16,
			photo:'党员证',
			sizes:'尺寸35*49mm',
			pixel:'像素413*579px'
		},
		{
			id:17,
			photo:'学信网（一寸）',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:18,
			photo:'学士学位证',
			sizes:'尺寸33*48mm',
			pixel:'像素390*567px'
		},
		{
			id:19,
			photo:'学历证件照',
			sizes:'尺寸33*48mm',
			pixel:'像素390*567px'
		},
		{
			id:20,
			photo:'全国高等自学考试',
			sizes:'尺寸41*54mm',
			pixel:'像素480*640px'
		},
		{
			id:21,
			photo:'研究生入学考试',
			sizes:'尺寸39*52mm',
			pixel:'像素480*640px'
		},
		{
			id:22,
			title:'职业',
			photo:'计算机等级考试',
			sizes:'尺寸25*35mm ',
			pixel:'像素295*413px'
		},
		{
			id:23,
			photo:'教师资格考试',
			sizes:'尺寸51*68mm',
			pixel:'像素600*800px'
		},
		{
			id:24,
			photo:'国家公务员考试',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:25,
			photo:'幼儿教师资格证',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:26,
			photo:'注册会计师考试',
			sizes:'尺寸15*19mm',
			pixel:'像素178*220px'
		},
		{
			id:27,
			photo:'会计师（初级）',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:28,
			photo:'会计师（中级）',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:29,
			photo:'会计师（高级）',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:30,
			photo:'证券从业资格证',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:31,
			photo:'护士资格证',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:32,
			photo:'医师资格证',
			sizes:'尺寸75*105mm',
			pixel:'像素885*1239px'
		},
		{
			id:33,
			photo:'二级建造师资格证',
			sizes:'尺寸50*70mm',
			pixel:'像素590*826px'
		},
		{
			id:34,
			title:'护照',
			photo:'美国签证',
			sizes:'尺寸51*51mm',
			pixel:'像素602*602px'
		},
		{
			id:35,
			photo:'日本签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:36,
			photo:'马来西亚签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:37,
			photo:'泰国签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:38,
			photo:'澳大利亚签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:39,
			photo:'新加坡签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:40,
			photo:'越南签证',
			sizes:'尺寸40*60mm',
			pixel:'像素472*709px'
		},
		{
			id:41,
			photo:'新西兰签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:42,
			photo:'菲律宾签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:43,
			photo:'法国签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:44,
			photo:'韩国签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:45,
			photo:'印度签证',
			sizes:'尺寸51*51mm',
			pixel:'像素602*602px'
		},
		{
			id:46,
			photo:'俄罗斯签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:47,
			photo:'韩国签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:48,
			photo:'柬埔寨签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:49,
			photo:'捷克签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:50,
			photo:'冰岛签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:51,
			photo:'加拿大签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:52,
			photo:'奥地利签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:53,
			photo:'吉尔吉斯斯坦签证',
			sizes:'尺寸25*35mm',
			pixel:'像素295*413px'
		},
		{
			id:54,
			photo:'缅甸签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},{
			id:55,
			photo:'芬兰签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:56,
			photo:'比利时签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:57,
			photo:'迪拜签证',
			sizes:'尺寸38*48mm',
			pixel:'像素449*567px'
		},
		{
			id:58,
			photo:'肯尼亚签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:59,
			photo:'蒙古签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:60,
			photo:'巴基斯坦签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
		{
			id:61,
			photo:'尼泊尔签证',
			sizes:'尺寸35*45mm',
			pixel:'像素413*531px'
		},
	]
	
	const photoClick =(photo)=>{
		
		// 将对象转换为查询字符串
		const queryString = Object.keys(photo)
		  .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(photo[key]))
		  .join('&');
		uni.navigateTo({
			url:`/subpack-age/details/index?${queryString}`
		})
	}
</script>

<template>
	<view class="container">
		<view class="input">
			<input class="search-btn" type="text" placeholder="输入名称搜索" />
			<view class="search-icon"></view>
			<button class="buttons">搜索</button>
		</view>
		<view class="inch" v-for="item in list" :key="item.id">
			<view class="inch-photo">{{item.title}}</view>
			<view class="one-photo" @click="photoClick(item)">
				<view class="left">
					<view>{{item.photo}}</view>
					<view class="sizes">{{item.sizes}}<text class="pixel">{{item.pixel}}</text> </view>
				</view>
				<view class="right">
					<image class="image" src="../../static/arrow.png" alt="Description"></image>
				</view>
			</view>
		</view>
		<view class="buttons"></view>
	</view>
</template>



<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		border-top: 1px solid #eee;
	}
	.buttons {
		height: 60rpx;
	}
	.inch {
		padding-left: 30rpx;
		font-size: 32rpx;
		
		
		.inch-photo{
			font-weight: 700;
			margin: 30rpx 0;
		}
		.one-photo{
			display: flex;
			justify-content: space-between;
			width: 630rpx;
			height: 120rpx;
		    background: #F7F7F7;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: -5rpx;
			padding: 30rpx;
			font-weight: 700;
			
			
			.left {
				.sizes {
					margin-top: 25rpx;
					font-weight: 700;
				}
				.pixel {
					
					margin-left: 15rpx;
				}
			}
			.right {
				line-height: 120rpx;
				.image{
					width: 15rpx;
					height: 30rpx;
					color: #CCCCCC;
					
				}
			}
		}
	}
	.input {
		position: relative;
		height: 96rpx;
		padding: 12rpx 30rpx;
		display: flex;
		justify-content: space-between;
		
		.buttons {
			border: none;
			font-size: 32rpx;
			color: #0296FF;
			font-weight: 600;
		}
		.search-icon {
			position: absolute;
			top: 35rpx;
			left: 52rpx;
			width: 31rpx;
			height: 31rpx;
			// background-color: #0296FF;
			background: url('../../static/search.png');
			/* 背景图片居中 */
			 background-position: center;
			/* 背景图片覆盖整个背景区域 */
			 background-size: cover;
			/* 保持背景图片的原始纵横比 */
			background-repeat: no-repeat;
		}
	}
	.search-btn {
	  width: 495rpx;
	  height: 72rpx;
	  background: #F5F6FA;
	  border-radius: 50rpx 50rpx 50rpx 50rpx;
	  padding-left: 64rpx;
	}
</style>